// 中间表单组件
<template>
  <ul class="todo-list">
      <!-- 动态绑定一个数据todo，传给item组件 -->
      <Item 
        v-for="(todoObj) in todos" 
        :key="todoObj.id" 
        :todo="todoObj"
        ></Item>
        <!-- :CheckTodo="handleCheck"
            :deleteTodo="deleteTodo" -->
  </ul>
</template>

<script>
import Item from '../components/Item.vue' 
export default {
    name:'List',
    components:{Item},
    // 接收外部数据 从app组件传入的数据
    props:['todos']
    // props:['todos','handleCheck','deleteTodo']
}
</script>

<style scoped>
    .todo-list{
        margin-left: 0px;
        border: 1px solid #ddd;
        border-radius: 2px;
        padding: 0px;
    }
    .todo-empty{
        height:40px;
        line-height: 40px;
        border: 1px solid #ddd;
        border-radius: 2px;
        padding-left: 5px;
        margin-top: 10px;
    }
    
</style>